import { Component } from 'react'
import { View, Image, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'
import image1 from '../../assets/images/9566868075f73bd7f1a2eede2f8bc893.jpg'

export default class Home extends Component {
  handleItemClick = (item: any) => {
    Taro.navigateTo({
      url: `/pages/detail/index?id=${item.id}`
    })
  }

  render() {
    // 模拟数据
    const items = [
      {
        id: 1,
        image: image1,
        title: 'Retro literature and art',
        subtitle: '复古文艺'
      },
      {
        id: 2,
        image: image1,
        title: 'Classic Wedding',
        subtitle: '经典婚礼'
      },
      {
        id: 3,
        image: image1,
        title: 'Vintage Style',
        subtitle: '复古风格'
      }
    ]

    return (
      <View className='home-container'>
        {items.map(item => (
          <View 
            key={item.id} 
            className='home-item'
            onClick={() => this.handleItemClick(item)}
          >
          <View className='image-wrapper'>
            <Image src={item.image} mode='aspectFill' className='item-image' />
            <View className='view-button'>
              <Text style={{ color: '#fff' }} className='button-text retro-font'>作品欣赏 <Text className='arrow'>→</Text></Text>
            </View>
          </View>
          <View className='item-content'>
            <Text className='item-title retro-font'>{item.title}</Text>
            <Text className='item-subtitle retro-font'>{item.subtitle}</Text>
          </View>
        </View>
        ))}
      </View>
    )
  }
}
